import React from "react";
import {Image, Breadcrumb, Button, Carousel, message, Popconfirm, Space, Table, Modal, Upload } from 'antd';
import '../assets/style/carlist.scss'
import {carousedestory, carousefind, carousecreat} from "../util/api";
import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";

class Carousellist extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            url: null,
            visible: false,
        }
    }

    componentDidMount(){
        this.carousefind()
    }

    async carousefind(){
        const res = await carousefind()
        const { success, data } = res.data;
        if(success){
            this.setState({
                url: data
            })
            console.info(data)
        }
    }

    async deleteclick(item){
        const admininfo = JSON.parse(localStorage.getItem('admin'))
        if(!admininfo) return message.error('登录过期,请重新登录')
        if(admininfo.role != 1) return message.error('你没有权限删除')
        if(item.role == 1) return message.error('不能删除超级管理员')
        const res = await carousedestory(item.carouselid)
        const { success } = res.data
        if(success){
            message.success('删除成功');
            this.carousefind()
        }
    }

    showModal = e => {
        const admininfo = JSON.parse(localStorage.getItem('admin'))
        if(!admininfo) return message.error('登录过期,请重新登录')
        if(admininfo.role != 1) return message.error('你没有权限添加')
        this.setState({
            visible: true,
        })
    };
    handleOk = async e => {
        console.log(e);
        const res = await carousecreat(this.state.imageUrl)
        const { success, msg } = res.data
        if(success){
            this.setState({
                visible: false,
            });
            this.carousefind()
            message.success(msg)
        }

    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
            imageUrl: null
        });
    };

    handleChange = info => {
        console.info(info)
        if (info.file.status === 'done') {
            this.setState({
                imageUrl: info.file.response.data[0]+'?x-oss-process=style/phonelook'
            })
        }
    };

    render() {
        const contentStyle = {
            height: '500px',
            color: '#fff',
            width: '1200px',
            background: '#364d79',
            objectFit: 'cover',
        };
        const { url } = this.state
        const urllist = []
        if(url){
            url.map(r=>{
                urllist.push(
                    <div>
                        <img style={contentStyle} src={r.arouselurl} alt=""/>
                    </div>
                )
            })
        }
        const columns = [
            {
                title: '序号',
                dataIndex: 'carouselid',
                key: 'carouselid',
            },
            {
                title: '图片',
                dataIndex: 'arouselurl',
                key: 'arouselurl',
                render: (text, record) => {
                    return <Image width={50} height={50} src={ record.arouselurl } />
                },
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => {
                    return <Space size="middle">
                        <Popconfirm
                            title="你确定要删除该图片?"
                            onConfirm={() => this.deleteclick(record)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="primary" shape="circle" icon={<DeleteOutlined/>}/>
                        </Popconfirm>
                    </Space>
                }
            },
        ];
        const { imageUrl } = this.state;
        const uploadButton = (
            <div>
                <PlusOutlined />
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );
        return(
            <div className="carousel">
                <div className="carousel-tit">
                    <Breadcrumb>
                        <Breadcrumb.Item>主导页</Breadcrumb.Item>
                        <Breadcrumb.Item>轮播管理</Breadcrumb.Item>
                    </Breadcrumb>
                    <div className="urladd">
                        <Button onClick={() => this.showModal()} type="primary" shape="circle" icon={<PlusOutlined />} />
                    </div>
                </div>
                <div className="imgbox">
                    <Carousel autoplay style={{width: 1200, height: 500, margin: '0 auto'}}>
                        {urllist}
                    </Carousel>
                </div>
                <Table pagination={{pageSize:2}} align="center" columns={columns} dataSource={this.state.url} />
                <Modal
                    title="查看用户详情"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    maskStyle={{backgroundColor: "#00000020"}}
                >
                    <Upload
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="http://127.0.0.1:7001/blog/picupload"
                        onChange={this.handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                </Modal>
            </div>
        )
    }
}

export default Carousellist
